<template>
	<a-tree-select
		v-model:value="barnId"
		@change="handelChange"
		show-search
		style="width: 100%"
		:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
		placeholder="选择栏舍"
		allow-clear
		tree-default-expand-all
		:tree-data="treeData"
		tree-node-filter-prop="label"
	></a-tree-select>

</template>

<script setup="barnTreeSelect">
	import { ref, onMounted } from 'vue';
	import bizHenhouseApi from '@/api/henhouse/bizHenhouseApi';

	const barnId = ref();
	const treeData = ref([]);
	const emit = defineEmits(['update:barnId','init:barnId']);

	const handelChange = (value) => {
		if(value === undefined){
			emit('update:barnId', undefined);
		}
		emit('update:barnId', value);
	};

	onMounted(() => {
		getTree();
		emit('init:barnId')
	});

	const getTree = () => {
		bizHenhouseApi.bizHenhouseTree()
			.then(resp => {
				treeData.value = resp;
			})
	};

	const clearBarnId = () => {
		barnId.value = undefined;
		emit('update:barnId', undefined);
	}

	const initBarnId = (id) => {
		barnId.value = id;
	}

	defineExpose({
		barnId,
		clearBarnId,
		initBarnId,
	})

</script>


<style scoped>

</style>
